.bar.bar-light .title 
{
    color:White;
 }
.bar .title
{
    width:100%;
    background-color:#4a87ee;
    margin:0;
 }
 .bar-home-on {
    background: url(../../images/pages/images/u66.png) no-repeat center;
    background-size:30px 30px;
}
.bar-history-on {
    background: url(../../images/pages/images/u52.png) no-repeat center;
    background-size:30px 30px;
}
.bar-skill-on {
    background: url(../../images/pages/images/u54.png) no-repeat center;
    background-size:30px 30px;
}
.bar-personal-on {
    background: url(../../images/pages/images/u56.png) no-repeat center;
    background-size:30px 30px;
}

ion-content{
top:45px;
width:100%;
margin-bottom:50px;
position:absolute;
overflow:hidden;
}
.courselist ul li
{
	margin-bottom: 15px;
    width:50%;
    float:left;
    position:relative;
    text-align: center;
}
.courselist ul li a{
	width: 100%;
    height:100%;
}
.coursemask {
position:absolute;
bottom:0;
height:100%;
width:80%;
background-color:#333333;
right:10%;
overflow:hidden;
filter:alpha(opacity=50); /*IE婊ら暅锛岄�忔槑搴�50%*/
-moz-opacity:0.5; /*Firefox绉佹湁锛岄�忔槑搴�50%*/
opacity:0.5;/*鍏朵粬锛岄�忔槑搴�50%*/

} 
.coursefinish{
	position:absolute;
	top:0;
	right: 10%;
	background-color: #007AFF;
	color: #FFF;
	overflow:hidden;
	font-size: 12px;
	padding: 1px 2px 1px 2px;
}
.courselist ul li a img
{
    width:80%;
    margin:0 10% 0 10%;
    border:1px solid #AAA;
    height:auto;
    z-index:1000;
}

    
.scroll-content
{
    top:45px;
    bottom:50px;
}

.programiline
{
    width:80%;
    height:15px;
    margin:0 10% 0 10%;
    vertical-align: middle;
    float: left;
}
.programiline .probar
{
	height: inherit;
	margin:0;
	width:85%;
	vertical-align: middle;
	text-align: center;float: left;
}

.spandot{
	width:10px;
	height: 10px;
	border-radius: 5px;
	background-color: #007AFF;
	float: left;
	margin-left: -10px;
	margin-top: -2.5px;
}
.proleft{
		background-color:#007AFF;
		height: 5px;
		float: left;
	}
.proright{
		background-color:#A2A2A2;
		height: 5px;
		margin: 0;
		float: left;
		margin: 0 -10px 0 0;
	}
.provalue{
		height: 10px;
		font-size:10px;
		text-align: center;
		vertical-align: middle;
		width: 15%;
		color: #007AFF;
		margin: 0;
		margin-left: -10px;
		line-height: 10px;
		float: right;
}
.tab-item{
	max-width:none ;
}
.bar-footer{
	overflow: hidden;
	height: 50px;
}

.coursedatail{
	height: 200px;
	width: 100%;
}
.coursedatail .bookimg{
	width: 30%;
	height: 198px;
	margin:20px 1% 0 3%;
	float: left;
}
.coursedatail .bookimg img{
	width: 100%;
	height: 150px;
}
.coursedatail .contentdes{
	width: 62%;
	height: 198px;
	margin:18px 3% 0 1%;
	float: left;
}

.coursedatail .contentdes .cute{
	width: 22px;
	height: 22px;
	color: #FFF;
	background-color: #6B46E5;
	font-size: 14px;
	float: left;
	text-align: center;
	vertical-align: middle;
}
.coursedatail .contentdes h5{
	color: #333333;
	font-size:16px;
	line-height: 22px;
	height: 22px;
	margin-left:34px;
	margin-top: 0;
}
.coursedatail .contentdes p{
	color: #333333;
	font-size:13px;
	text-indent:2em;
	line-height: 20px;
	height: 120px;
	overflow : hidden;
    text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 6;
}
.coursedatail  .learnprogress{
	width: 94%;
	height: 18px;
	border:1px solid #CCCCCC;
	vertical-align: center;
	text-align: center;
	margin:0 3% 0 3%;
	left:0;
	top:180px;
	position:absolute;
}
.coursedatail  .learnprogress .learnstext{
	font-size: 10px;
	width: 18%;
	float: left;
	color: #000;
}
.coursedatail  .learnprogress  .probar
{
	height: inherit;
	margin:0;
	width:62%;
	vertical-align: middle;
	text-align: center;float: left;
	display:inline;
	padding-top: 5px;;
	float: left;
}

.coursedatail  .learnprogress .prevalue
{
	height: inherit;
	margin:0;
	width:62%;
	vertical-align: middle;
	text-align: center;float: left;
	padding-top: 5px;
	float: left;
	
}

.coursevedio .item-driver{
	width:100%;
}
.coursevedio{
	top:5px;
	left: 0;
	width: 100%;
	height: auto;
	position: relative;
}
.coursevedio ul li{
	width: 100%;
	vertical-align: middle;
	text-align: left;
	border-bottom: 1px solid #CCCCCC ;
	height: 36px;
	display: block;
}
.coursevedio ul .itemtitle{
	font-size:14px ;
	border: 1px solid #C0C0C0;
	text-align: left;
	height: 42px;
	background-color: #E4E5E7;
	padding-left: 10px;
}
.coursevedio a{
	text-align: left;
	font-size:13px ;
	width: 100%;
	height: 36px;
	text-decoration: none;
	vertical-align: middle;
	line-height: 36px;
	overflow:聽hidden;
	display: inline-block;
}
.coursevedio li a .coursefinish1{
	position:relative;
	top:6px;
	right: 10px;
	background-color: #007AFF;
	color: #FFF;
	overflow:hidden;
	height: 22px;
	line-height: 22px;
	width: 22px;
	font-size: 13px;
	float: right;
	text-align: center;
	border-radius: 5px;
}

.coursevedio ul li a span{
	height: 36px;
	display: inline-block;
}
.coursevedio ul li a .coursetitle1{
	padding-left: 10px;
	color: #000;
	width: 80%;
	height: 30px;
    line-height: 30px;
	overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    white-space:nowrap;
}

.coursevedio li a .coursetitle2{
	padding-left: 10px;
	color: #B2B2B2;
	width: 80%;
	height: 30px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

.myvedio{
	height: 280px;
	top:0
	left:0;
	width: 100%;
	vertical-align: middle;
	position: absolute;
	background:#000;
}

.comments{
	top:330px;
	position:relative;
	width:100%;
	height:auto;
}

.comments .tab-item{
	border:2px #CCC solid;
	font-size:14px;
	color:#333;
}

.contents{
	width:96%;
	padding:10px 2% 0 2%;
	heigt:auto;
	font-size:14px;
	top:330px;
	position:relative;
}
.contents p{
	width:100%;
	text-indent:2em;
}
